<template>
  <div>
    <el-dialog
      :title="this.$t('common.Add')"
      :visible.sync="Visible"
      width="500px"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div style="border-bottom:0;" class="midContant clearfix">
        <span style="text-align: right" class="Span borderR borderB"
          >{{$t('FreightManagementLang.Interval_type')}}:</span
        >
        <span class="Span borderB contant">
          <el-select
            ref="range_category"
            class="Required"
            filterable
            @blur="handleBlur('range_category', $event)"
            @change="handleChang('range_category')"
            v-model="data.range_category"
            :placeholder="$t('common.select_plactholder')"
          >
            <el-option
              v-for="item in options_Interval"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </span>
        <span v-if="this.data.range_category==4" style="text-align: right" class="Span borderR borderB"
          >{{$t('FreightManagementLang.Select_fields')}}:</span
        >
        <span v-if="this.data.range_category==4" class="Span borderB contant">
          <el-select
            ref="item_id"
            class="Required"
            filterable
            @blur="handleBlur('item_id', $event)"
            @change="handleChang('item_id')"
            v-model="data.item_id"
            :placeholder="$t('common.select_plactholder')"
          >
            <el-option
              v-for="item in options_fields"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </span>
        <span v-if="this.data.range_category==4" style="text-align: right" class="Span borderR borderB"
          >{{$t('FreightManagementLang.Control_content')}}:</span
        >
        <span v-if="this.data.range_category==4" class="Span borderB contant">
          <el-input
            v-if="data.item_type!==2&&data.item_type!==6"
            ref="item_val"
            @blur="handleBlur('item_val',$event)"
            @focus="handleFocus($event)"
            class="Required"
            :placeholder="$t('common.input_plactholder')"
            v-model="data.item_val"
          ></el-input>
          <div style="display:flex;" v-else-if="data.item_type===6">
            <el-input
              style="margin-right: 15px;"
              ref="range_val_min"
              @blur="handleBlur('range_val_min',$event)"
              @focus="handleFocus($event)"
              class="Required"
              :placeholder="$t('common.input_plactholder')"
              v-model="data.range_val_min"
            ></el-input>
            <el-input
              ref="range_val_max"
              @blur="handleBlur('range_val_max',$event)"
              @focus="handleFocus($event)"
              class="Required"
              :placeholder="$t('common.input_plactholder')"
              v-model="data.range_val_max"
            ></el-input>
          </div>
          <el-date-picker
            v-else
            ref="timeData"
            class="Required" 
            v-model="data.timeData"
            @blur="Blur('timeData')"
            @focus="Focus('timeData')"
            type="daterange"
            value-format="timestamp"
            :range-separator="$t('common.range_separator')"
            :start-placeholder="$t('common.start_placeholder')"
            :end-placeholder="$t('common.end_placeholder')">
          </el-date-picker>
        </span>
        <span v-if="this.data.range_category==5" style="text-align: right" class="Span borderR borderB"
          >{{$t('FreightManagementLang.Select_Shipper')}}:</span
        >
        <span v-if="this.data.range_category==5" class="Span borderB contant">
          <Multiselect
            class="Required" 
            :select_label="'name'"
            ref="cargo_owner"
            :modalName="'cargo_owner'"
            :select_model="data.cargo_owner"
            :select_options="options_Shipper"
            @selectBlur="selectBlur('cargo_owner')"
            @selectChang="MultiselectChange"
            :isLazy="true"
            @loadData="loadData"
            @filterDataFun="filterDataFun"
          >
          </Multiselect>
        </span>
        <span v-if="this.data.range_category!==4&&this.data.range_category!==5" style="text-align: right" class="Span borderR borderB"
          >{{$t('FreightManagementLang.Interval_value')}}:</span
        >
        <span v-if="this.data.range_category!==4&&this.data.range_category!==5" class="Span borderB contant">
          <el-input-number
            style="margin-right: 15px;"
            controls-position="right"
            class="Required"
            size="small" 
            ref="range_val_min" 
            @blur="handleBlur('range_val_min', $event)" 
            @focus="handleFocus($event)" 
            :min="0" 
            :precision="data.range_category===0?1:4"
            v-model="data.range_val_min">
          </el-input-number>
          <el-input-number
            controls-position="right"
            class="Required"
            size="small" 
            ref="range_val_max" 
            @blur="handleBlur('range_val_max', $event)" 
            @focus="handleFocus($event)" 
            :min="0" 
            :precision="data.range_category===0?1:4"
            v-model="data.range_val_max">
          </el-input-number>
        </span>
        <span v-if="levelType=='level_3'" style="text-align: right" class="Span borderR borderB"
          >{{$t('FreightManagementLang.Unit_price_type')}}:</span
        >
        <span v-if="levelType=='level_3'" class="Span borderB contant">
          <el-select
            ref="price_category"
            class="Required"
            filterable
            @blur="handleBlur('price_category', $event)"
            @change="handleChang('price_category')"
            v-model="data.price_category"
            :placeholder="$t('common.select_plactholder')"
          >
            <el-option
              v-for="item in options_Unit_price"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </span>
        <span v-if="levelType=='level_3'" style="text-align: right" class="Span borderB borderR"
          >{{$t('FreightManagementLang.weight_algorithm')}}:</span
        >
        <span v-if="levelType=='level_3'" class="Span borderB contant">
          <el-input-number
            :disabled="data.price_category!=3"
            controls-position="right"
            :class="data.price_category==3?'Required':''"
            size="small" 
            ref="weight_calc_rule" 
            @blur="handleBlur('weight_calc_rule', $event)" 
            @focus="handleFocus($event)" 
            :min="1" 
            :precision="0"
            v-model="data.weight_calc_rule">
          </el-input-number>
        </span>
        <span style="text-align: right" class="Span borderB borderR"
          >{{$t('FreightManagementLang.sort')}}:</span
        >
        <span class="Span borderB contant">
          <el-input-number
            controls-position="right"
            class="Required"
            size="small" 
            ref="sort" 
            @blur="handleBlur('sort', $event)" 
            @focus="handleFocus($event)" 
            :min="1" 
            :precision="0"
            v-model="data.sort">
          </el-input-number>
        </span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirm" size="small"
          >{{$t('common.confirm')}}</el-button
        >
        <el-button @click="cancel" size="small">{{$t('common.cancel')}}</el-button>
      </span>
      
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
  },
  data() {
    return {
      Visible: false,
      levelType:'',
      line_id:'',
      rid:'',
      data: {
        range_category: "",
        item_id:"",
        item_type:"",
        item_val:"",
        timeData:[],
        cargo_owner:'',
        range_val_min:"",
        range_val_max: "",
        price_category: "",
        weight_calc_rule: undefined,
        sort:'',
      },
      options_Interval: [],
      options_fields:[],
      options_Shipper_keyword:'',
      options_Shipper_limit:100,
      options_Shipper_page:1,
      options_Shipper_page_all:10,
      options_Shipper:[],
      options_Unit_price: [],
      confirmTrue:true,//确定按钮保护
    };
  },
  created() {
    
  },
  mounted() {},
  watch: {
  },
  methods: {
    init(levelType,lineData,data) {
      this.levelType=levelType
      this.line_id=lineData.id
      if(levelType=='level_3'){
        if(JSON.stringify(data) == "{}" ){
          this.rid=0
        }else{
          this.rid=data.id
        }
      }
      this.getOptions()
      this.Visible = true;
    },
    //获取下拉单数据
    getOptions(){
      this.$get("freightSysItems").then((res) => {
        this.options_Interval = res.data.range_type;
        this.options_Unit_price = res.data.price_type;
      });
      this.$get("lineItems",{id:this.line_id,position:1}).then((res) => {
        this.options_fields = res.data;
      });
      this.$get("sonMembers",{keyword:this.options_Shipper_keyword,limit:this.options_Shipper_limit,page:this.options_Shipper_page}).then((res) => {
        this.options_Shipper = res.data;
        this.options_Shipper_page_all=res.pageinfo.page_all
      });
    },
    loadData(){
      if(this.options_Shipper_page<this.options_Shipper_page_all){
        this.options_Shipper_page++
        this.$get("sonMembers",{keyword:this.options_Shipper_keyword,limit:this.options_Shipper_limit,page:this.options_Shipper_page}).then((res) => {
          this.options_Shipper.push(...res.data)
        });
      }
    },
    filterDataFun(value){
      this.options_Shipper_page=1
      this.options_Shipper_keyword=value
      this.$get("sonMembers",{keyword:this.options_Shipper_keyword,limit:this.options_Shipper_limit,page:this.options_Shipper_page}).then((res) => {
        this.options_Shipper = res.data;
        this.options_Shipper_page_all=res.pageinfo.page_all
      });
    },
    // 提交
    confirm() {
      //是否有空值必选项标识
      let type = true;
      //输入框判断是否有值
      if (!this.data.range_category&&this.data.range_category!==0) {
        this.$refs.range_category.$el.childNodes[1].childNodes[1].style.border =
          "1px solid red";
        type = false;
      }
      if(this.data.range_category==4){
        if (!this.data.item_id&&this.data.item_id!==0) {
          this.$refs.item_id.$el.childNodes[1].childNodes[1].style.border =
            "1px solid red";
          type = false;
        }
        if(this.data.item_type!==2&&this.data.item_type!==6){
          if(!this.data.item_val){
            this.$refs.item_val.$el.childNodes[1].style.border='1px solid red'
            type=false
          }
        }else if(this.data.item_type==6){
          if(!this.data.range_val_min){
            this.$refs.item_val.$el.childNodes[1].style.border='1px solid red'
            type=false
          }
          if(!this.data.range_val_max){
            this.$refs.item_val.$el.childNodes[1].style.border='1px solid red'
            type=false
          }
        }else{
          if(this.data.timeData.length==0){
            this.$refs.timeData.$el.style.borderColor='red'
          }
        }
      }else if(this.data.range_category==5){
        if (!this.data.cargo_owner&&this.data.cargo_owner!==0) {
          this.$refs.cargo_owner.$el.childNodes[0].childNodes[1].childNodes[1].style.border ="1px solid red";
          type = false;
        }
      }else{
        if(!this.data.range_val_min){
          this.$refs.range_val_min.$el.childNodes[2].childNodes[1].style.border='1px solid red'
          type=false
        }
        if(!this.data.range_val_max){
          this.$refs.range_val_max.$el.childNodes[2].childNodes[1].style.border='1px solid red'
          type=false
        }
      }
      
      // if(this.data.range_val_min>=this.data.range_val_max){
      //   this.$refs.range_val_min.$el.childNodes[2].childNodes[1].style.border='1px solid red'
      //   this.$refs.range_val_max.$el.childNodes[2].childNodes[1].style.border='1px solid red'
      //   type=false
      // }
      if(this.levelType=='level_3'){
        if (!this.data.price_category&&this.data.price_category!==0) {
          this.$refs.price_category.$el.childNodes[1].childNodes[1].style.border =
            "1px solid red";
          type = false;
        }
        if(!this.data.weight_calc_rule&&this.data.price_category==3){
          this.$refs.weight_calc_rule.$el.childNodes[2].childNodes[1].style.border='1px solid red'
          type=false
        }
      }
      if(!this.data.sort){
        this.$refs.sort.$el.childNodes[2].childNodes[1].style.border='1px solid red'
        type=false
      }
      if (type && this.confirmTrue) {
        this.confirmTrue=false
        window.setTimeout(()=>{
          this.confirmTrue=true
        },1000);
        if(this.levelType=='level_3'){
          let params = new FormData();
          params.append("id", this.line_id);
          params.append("rid", this.rid);
          params.append("range_category", this.data.range_category);
          params.append("item_id", this.data.item_id);
          if(this.data.item_type===6){
            params.append("item_val", this.data.range_val_min+','+this.data.range_val_max);
          }else if(this.data.item_type===2){
            let arr=this.data.timeData.map(el=>{return el/1000})
            this.data.range_val_min=arr[0]
            this.data.range_val_max=arr[1]
            params.append("item_val", arr.join(','));
          }else{
            params.append("item_val", this.data.item_val);
          }
          params.append("cargo_owner", this.data.cargo_owner);
          params.append("range_val_min", this.data.range_val_min);
          params.append("range_val_max", this.data.range_val_max);
          params.append("price_category", this.data.price_category);
          params.append("weight_calc_rule", this.data.weight_calc_rule);
          params.append("sort", this.data.sort);
          this.$postForm("addLineFreightRange", params).then((res) => {
            this.confirmTrue = true;
            if(res.success){
              this.$message.success(res.msg);
              this.$emit("success",this.levelType);
              this.cancel()
            }
          });
        }else{
          let params = new FormData();
          params.append("id", this.line_id);
          params.append("range_category", this.data.range_category);
          params.append("item_id", this.data.item_id);
          if(this.data.item_type===6){
            params.append("item_val", this.data.range_val_min+','+this.data.range_val_max);
          }else if(this.data.item_type===2){
            let arr=this.data.timeData.map(el=>{return el/1000})
            this.data.range_val_min=arr[0]
            this.data.range_val_max=arr[1]
            params.append("item_val", arr.join(','));
          }else{
            params.append("item_val", this.data.item_val);
          }
          params.append("cargo_owner", this.data.cargo_owner);
          params.append("range_val_min", this.data.range_val_min);
          params.append("range_val_max", this.data.range_val_max);
          params.append("sort", this.data.sort);
          this.$postForm("addLineFreightRule", params).then((res) => {
            this.confirmTrue = true;
            if(res.success){
              this.$message.success(res.msg);
              this.$emit("success",this.levelType);
              this.cancel()
            }
          });
        }
      }
    },
    //取消
    cancel() {
      this.data = {
        range_category: "",
        item_id:"",
        item_type:"",
        item_val: "",
        timeData:[],
        cargo_owner:"",
        range_val_min:"",
        range_val_max: "",
        price_category: "",
        weight_calc_rule: undefined,
        sort:'',
      };
      this.options_Shipper_keyword=''
      this.options_Shipper_limit=10
      this.options_Shipper_page=1
      this.options_Shipper_page_all=10
      this.Visible = false;
      
      let dom = document.getElementsByClassName("el-input__inner");
      for (let i = 0; i < dom.length; i++) {
        dom[i].style.border = "1px solid #E0E3E9";
      }
    },
    //输入框、下拉框失去焦点边框变色
    handleBlur(name, event) {
      if (!this.data[name]&&this.data[name]!==0) {
        event.target.style.border = "1px solid red";
      }
    },
    //输入框、下拉框获取焦点边框变色
    handleFocus(event) {
      event.target.style.border = "1px solid #E0E3E9";
    },
    //下拉框有值后边框变色
    handleChang(data) {
      if(data=='price_category'){
        this.data.range_val_min=''
        this.data.range_val_max=''
        this.data.weight_calc_rule=undefined
        this.$refs.weight_calc_rule.$el.childNodes[2].childNodes[1].style.border='1px solid var(--input-border-color)'
      }
      if (this.data[data].length==0) {
        this.$refs[data].$el.childNodes[1].childNodes[1].style.border = "1px solid red";
      }else{
        this.$refs[data].$el.childNodes[1].childNodes[1].style.border ="1px solid #E0E3E9 ";
      }
      if(data=='item_id'){
        this.data.item_type=this.options_fields.filter(el=>{return el.id==this.data.item_id})[0].type
      }
    },
    //自定义多选下拉框
    selectBlur(name){
      this.options_Shipper_keyword=''
      this.options_Shipper_limit=10
      this.options_Shipper_page=1
      this.options_Shipper_page_all=10
      if (this.data[name] === ""||!this.data[name]&&this.data[name]!==0) {
        this.$refs[name].$el.childNodes[0].childNodes[1].childNodes[1].style.border ="1px solid red";
      }
    },
    MultiselectChange(obj){
      this.data[obj.name]=obj.value
      if (this.data[obj.name].length===0) {
        this.$refs[obj.name].$el.childNodes[0].childNodes[1].childNodes[1].style.border = "1px solid red";
      }else{
        this.$refs[obj.name].$el.childNodes[0].childNodes[1].childNodes[1].style.border ="1px solid #E0E3E9 ";
      }
    },
    // 判断了时间组件内容是否有东西
    Focus(name) {
      let dom = this.$refs[name].$el
      dom.style.borderColor = "#EBEEF3";
      
    },
    Blur(name) {
      let dom = this.$refs[name].$el
      if (this.data[name].length==0) {
        dom.style.borderColor = "red";
      }
    },
  },
};
</script>

<style scoped lang="less" >

.foot {
  /deep/.el-input--mini {
    width: 60% !important;
  }
}
.Span{
  width: 50%;
}



</style>